import React, { Component } from "react";

import Form from "./Form";
import List from "./List";

class App extends Component {
  state = {
    list: [
      {
        id: 1,
        name: "zhangsan",
      },
      {
        id: 2,
        name: "lisi",
      },
    ],
  };

  fn = (v) => {
    // console.log("fn", v);
    this.state.list.push({
      id: new Date().getTime(),
      name: v,
    });
    this.setState({});
  };

  del = (id) => () => {
    this.setState((prevState) => {
      return {
        list: prevState.list.filter((item) => item.id !== id),
      };
    });
  };

  render() {
    const { list } = this.state;
    return (
      <>
        <h2>todolist</h2>
        <Form onAdd={this.fn} />
        <List list={list} onDel={this.del} />
      </>
    );
  }
}

export default App;
